<template>
  <div>

    <el-tabs v-model="active">
      <el-tab-pane label="组件属性" name="first">

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              字段标识
            </div>
          </el-col>
          <el-col :span="18">
            <select-model :model.sync="store.current.model" ></select-model>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              字段标题
            </div>
          </el-col>
          <el-col :span="18">
            <el-input v-model="store.current.options.label" placeholder="label"></el-input>
          </el-col>
        </el-row>


        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              文本框属性
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              提示文字
            </div>
          </el-col>
          <el-col :span="18">
            <el-input clearable v-model="store.current.options.placeholder" placeholder="提示文字"></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              默认值
            </div>
          </el-col>
          <el-col :span="18">
            <el-input clearable v-model="store.current.options.defaultValue" placeholder="输入默认值"></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              操作属性
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              <el-switch active-text='清空' v-model="store.current.options.clearable"></el-switch>
              <el-switch active-text='禁用' v-model="store.current.options.disabled"></el-switch>
              <el-switch active-text='只读' v-model="store.current.options.readonly"></el-switch>
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              显示类型
            </div>
          </el-col>
          <el-col :span="18">
             <el-select   v-model="store.current.options.format" placeholder="请选择">
                <el-option v-for="item in dateTypes" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              格式
            </div>
          </el-col>
          <el-col :span="18">
              <el-select   v-model="store.current.options.showType" placeholder="请选择">
                <el-option v-for="item in dateTypes" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              数据校验
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              <el-select clearable @change="regularCheckChange" v-model="store.current.options.regularCheck" placeholder="请选择">
                <el-option v-for="item in regularChecks" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="8">
            <div class="prop-set-title">添加校验</div>
          </el-col>
          <el-col :span="4">
            <el-button
              @click="addCheckRule"
              type="primary"
              icon="el-icon-edit"
              circle
            ></el-button>
          </el-col>
        </el-row>

      </el-tab-pane>
      <el-tab-pane label="表单属性" name="second">
        <form-config   :store='store'></form-config>
      </el-tab-pane>
    </el-tabs>

   <selfCheck ref="selfCheck" :rules="store.current.rules"></selfCheck>

  </div>
</template>

<script>
import selfCheck from "@/low-code/components/self-check/"
  import { regularCheck, ruleCheckOringin } from "@/low-code/utils/enumeration.js"
 import formConfig from "@/low-code/setting/form-config/index.vue"
  import clone from 'clone'
  export default {
    inject: ['getStore'],
    components: { formConfig,selfCheck,},
    data () {
      return {
        active: 'first',
        dateTypes:[
          {
            value:'yyyy',
            label: 'yyyy'
          },
          {
            value:'yyyy-MM',
            label: 'yyyy-MM'
          },
          {
            value:'yyyy-MM-dd',
            label: 'yyyy-MM-dd'
          }
        ],
        regularChecks: [
          {
            value: regularCheck.VALUE,
            label: '必填'
          }, {
            value: regularCheck.STRING,
            label: '字符串'
          }, {
            value: regularCheck.EMAIL,
            label: '邮箱'
          }, {
            value: regularCheck.PHONE,
            label: '手机号码'
          }, {
            value: regularCheck.CARD,
            label: '身份证'
          }, {
            value: regularCheck.POSTAL,
            label: '邮政编码'
          }, {
            value: regularCheck.QQ,
            label: 'QQ号'
          }, {
            value: regularCheck.IP,
            label: 'IP'
          }, {
            value: regularCheck.ENGLISH,
            label: '英文'
          }, {
            value: regularCheck.CHINESE,
            label: '中文'
          },]
      }
    },
    watch: {
      "store.current.options": {
        handler () { //特别注意，不能用箭头函数，箭头函数，this指向全局
          this.$handleStack.push(clone(this.store.root))
        },
        // immediate: true,  //刷新加载 立马触发一次handler
        deep: true  // 可以深度检测到 obj 对象的属性值的变化
      },
    },
    methods: {
      regularCheckChange (type) {
        let index = this.store.current.rules.findIndex(item => {
          return item.ruleType == ruleCheckOringin.SELECT
        })
        if (index != -1) {
          this.store.current.rules.splice(index, 1)
        }
        if (type) {
          this.store.current.rules.push({ validator: null, validatorType: type, trigger: 'blur', ruleType: ruleCheckOringin.SELECT })
        }
      },
    addCheckRule() {
      this.$refs["selfCheck"].dialogVisible=true
    },
    },
    computed: {
      store () {
        return this.getStore()
      }
    }
  }
</script>

<style  scoped>
::v-deep .el-tabs__item[aria-controls] {
  width: 50% !important;
  text-align: center;
}
::v-deep .el-button.is-circle {
  padding: 5px;
}
</style>